<template>
    <h1>个人信息</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>职业：{{ job.type }}</h2>
    <h2>薪水：{{ job.salary }}</h2>
    <h2>爱好：{{ hobby }}</h2>
    <button @click="changeInfo">修改</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        注意：reactive 函数不能处理基本类型数据
    </p>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'

export default {
    name: 'ref',
    setup() {
        // 数据
        let name = ref('张三')
        let age = ref(18)
        let job = reactive({
            type: '前端',
            salary: '30k'
        })
        let hobby = reactive([
            '打游戏',
            '打游戏',
            '打游戏',
        ])

        // 方法
        function changeInfo() {
            name.value = '李四'
            age.value = 90
            job.type = 'UI设计'
            job.salary = '20k'
            // 修改数组类型的值（通过索引）
            hobby[0] = '学习'
        }


        return {
            name,
            age,
            job,
            hobby,
            changeInfo
        }
    }
} 
</script>
<style></style>